<!--
  author: tangcheng_cd
  create by: 2018/6/5
  descr: 数据包物理表管理
-->
<template>
  <div class="meta-data-pkg-table-manager">
    <v-header title="数据包物理表" :showDownloadBtn="false" :saveShow="false"></v-header>
    <el-row type="flex" class="manage-box" style="height: 100%">
      <el-col :span="8" class="left-box">
        <el-row class="tool-bar">
          <el-input v-model="searchKeyword" size="mini" prefix-icon="el-icon-search" placeholder="请输入内容"
                    clearable></el-input>
          <el-button type="primary" size="mini" @click="queryleftBtnClicked">查询</el-button>
        </el-row>
        <meta-data-pkg-grid
          ref="leftDataGrid"
          class="left-data-grid"
          @rowClicked="leftGridRowClicked"
          :display-columns="leftGridCols"
          :paginationLayout="'total, sizes, jumper'"
          :is-show-expand="false">
        </meta-data-pkg-grid>
      </el-col>
      <el-col :span="16" class="right-box">
        <el-container class="pkg-table-box">
          <el-header class="header-tool-bar" height="50px">
            <!--工具栏-->
            <el-row>
              <el-button type="primary" size="mini" @click.left.stop="addBtnClicked">增加</el-button>
              <el-button type="primary" size="mini" @click.left.stop="delBtnClicked">删除</el-button>
              <el-button type="primary" size="mini" @click.left.stop="editBtnClicked">编辑</el-button>
              <el-button type="primary" size="mini" @click.left.stop="refreshBtnClicked">刷新</el-button>
              <span class="conditionquery">
          <el-input v-model="searchKeywords" size="mini" prefix-icon="el-icon-search" placeholder="请输入内容"
                    clearable></el-input>
          <el-button type="primary" size="mini" @click="queryRightBtnClicked">查询</el-button>
        </span>
            </el-row>
          </el-header>
          <el-main class="main-table-box">
            <meta-data-pkg-table-grid
              ref="rightDataGrid"
              :is-show-expand="true"
              checkbox>
            </meta-data-pkg-table-grid>
          </el-main>
        </el-container>
      </el-col>
    </el-row>
    <mdp-add-modify-panel ref="addModifyPanel"
                          @submitAfter="addModifyPanelSubmitAfter">
    </mdp-add-modify-panel>
  </div>
</template>

<script>
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  import {VHeader} from '../../../../components'
  import Msg from '../../../../assets/js/msg'
  import metaDataPkgTableGrid from './metaDataPkgTableGrid'
  import mdpAddModifyPanel from './mdpTAddModifyPanel'
  import metaDataPkgGrid from '../metaDatapkgManager/metaDataPkgGrid'

  export default {
    name: 'meta-data-pkg-manager',
    components: {
      metaDataPkgGrid,
      metaDataPkgTableGrid,
      mdpAddModifyPanel,
      VHeader
    },
    data () {
      return {
        leftGridCols: ['meta_id', 'pkg_name', 'pkg_name_cns'],
        searchKeyword: null,
        searchKeywords: null
      }
    },
    methods: {
      // 新增按钮被点击
      addBtnClicked () {
        let leftCurNode = this.$refs.leftDataGrid.getCurrentNode()
        if (leftCurNode) {
          this.$refs.addModifyPanel.addShow(leftCurNode)
        } else {
          this.$message.error('请在左侧选择一条数据记录')
        }
      },
      // 编辑按钮被点击
      editBtnClicked () {
        let selections = this.$refs.rightDataGrid.getSelections()
        if (selections && selections.length > 0) {
          if (selections.length === 1) {
            let selection = selections[0]
            this.$refs.addModifyPanel.editShow(selection)
          } else {
            this.$message.error('只能选择一条')
          }
        } else {
          this.$message.error('请选择需要编辑的信息')
        }
      },
      // 删除按钮被点击
      delBtnClicked () {
        let selections = this.$refs.rightDataGrid.getSelections()
        if (selections && selections.length > 0) {
          Msg.confirm('确定删除选中的信息吗？', {
            onConfirm: () => {
              ajax.post(api.DELETE_META_DATAPKG_TABLE, {
                key_list: selections
              }).then(res => {
                // 清除选择
                this.$refs.rightDataGrid.clearSelections()
                // 刷新数据
                this.$refs.rightDataGrid.getData()
                this.$message.info('删除成功')
              }).catch(e => {
                this.$message.info('删除失败')
                console.error('删除信息发生错误！', e)
              })
            },
            onCancel () {
              // 空的实现也需要的，否则控制台有错误
            }
          })
        } else {
          this.$message.error('请选择需要删除的信息')
        }
      },
      // 刷新按钮被点击
      refreshBtnClicked () {
        this.$refs.rightDataGrid.getData()
      },
      // 查询按钮被点击
      queryleftBtnClicked () {
        // 通过关键字搜索
        this.$refs.leftDataGrid.getDataByKeyword(this.searchKeyword)
      },
      // 查询按钮被点击
      queryRightBtnClicked () {
        // 通过关键字搜索
        this.$refs.rightDataGrid.getDataByKeyword(this.searchKeywords)
      },
      // 新增修改面板提交后处理
      addModifyPanelSubmitAfter () {
        this.$refs.rightDataGrid.getData()
        this.$message.info('提交成功')
      },
      // 左侧面板行呗单击
      leftGridRowClicked (node) {
        this.$refs.rightDataGrid.getDataByLeftNode(node)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .meta-data-pkg-table-manager
    height 100%
    .manage-box
      height 100%
      padding 10px 0px 20px 10px
      .left-box
        height 100%
        margin-right 3px
        background #fff
        position relative
        .tool-bar
          height 50px
          line-height 50px
          padding 0px 15px
          clear both
          margin-bottom 0px
          .conditionquery
            width 100%
          .el-input--mini
            width 200px
          .el-button--danger
            background-color #016DFB
            border-color #016DFB
        .left-data-grid
          height 100%
          padding-left 5px
          padding-right 5px
          .el-table
            .el-table__body
              padding-bottom 120px
          .el-pagination
            bottom 33px
            padding-right 5px
      .right-box
        height 100%
        position relative
        .pkg-table-box
          height 100%
          .header-tool-bar
            line-height 50px
            vert-align middle
            background-color #FFFFFF
            margin-bottom 3px
            .conditionquery
              width 300px
              float right
              margin-right -10px
            .el-input--mini
              width 200px
            .el-button--danger
              background-color #016DFB
              border-color #016DFB
            .dialog-input
              width 210px
              height 30px
              border-radius 4px
              border 1px solid #D8DCE5
          .main-table-box
            padding 0px 0px
            height 100%
            background-color #fff
            .el-pagination
              bottom 33px
              padding-right 5px
</style>
